<template>
	<view>
		<page-title Theme="geryTheme" class="cal">书籍详情</page-title>
		<view 
		class="flex align-center py-2 geryTheme cal" 
		style="height: 250rpx;"
		>
			<image 
			src="../../static/Rebook/Rebook1.jpg" 
			mode="widthFix" 
			lazy-load
			class="flex-1 mx-2 rounded"
			></image>
			<view class="flex-2 mx-2">
				<view style="font-size: 45rpx;">{{name}}</view>
				<view class="font mt-1">作者: {{author}}</view>
				<view class="flex align-center mt-2">
					<button class="flex-1 mx-2">分享</button>
					<button class="flex-1 mx-2">收藏</button>
				</view>
			</view>
		</view>
		
		<view class="shadow">
			<tab-top :tabArr="['详情', '分享']" @getTabIndex="getTabIndex" class="cal" />
			<!--具体信息 -->
			<!-- 详情 -->
			<scroll-view scroll-y v-if="tabIndex === 0" :style="{ height: `${calHeight}rpx`}">
				<view class="py-2 flex justify-center text-light-black">——— 简介 ———</view>
				<view class="px-2 font-lg" style="line-height: 80rpx;">{{synopsis}}</view>
			</scroll-view>
			<!-- 目录 -->
			<scroll-view scroll-y v-else style="height: 1129rpx;">
				<block v-for="item in chapterCatalog" :key="item.id">
					<view 
					class="p-2 text-ellipsis border-bottom" 
					hover-class="bg-light"
					@click="toReadingPage(item.id)"
					>{{item.title}}</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import $U from '@/common/unit.js'
	import test from '@/common/test';
	import PageTitle from '@/components/pageTitle.vue';
	import tabTop from '@/components/tabTop.vue';
	export default {
		data() {
			return {
				tabIndex: 0,
				name: test.name,
				author: test.author,
				synopsis: test.synopsis,
				chapterCatalog: test.chapterCatalog,
				calHeight: 0,
			}
		},
		components: {
			PageTitle,
			tabTop
		},
		mounted(){
			$U.calSurplusHeight({
				pageID: this,
				pos: 'cal',
				success: val => this.calHeight = val
			});
		},
		methods: {
			getTabIndex(index){
				console.log('getTabIndex:',index);
				this.tabIndex = index;
			},
			toReadingPage(id){
				console.log('书籍id:',id);
				uni.navigateTo({
					url: `/pages/reading/reading?chapterID=${id}`
				})
				
			}
		}
	}
</script>


<style>
  /* 全局只有这里使用geryTheme,故不需要添加scoped */
  .geryTheme{
	  background-color: #a8b0c3;
  }
</style>
